<!--
 * @Author: your name
 * @Date: 2020-09-01 11:26:12
 * @LastEditTime: 2020-09-24 17:39:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \admin-management\web\src\views\system\menu-dialog.vue
-->

<template>
  <CustomDialog v-model:visible="visibleDialog" @confirm="handleOk">
    <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
      <template v-for="item in form" :key="item.key">
        <a-form-item :label="item.label" v-if="item.key === 'block_type'">
          <a-select v-model:value="data.record[item.key]" @change="handleChange">
            <a-select-option v-for="item in category" :key="item.value" :value="item.value">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <FormItem v-else :data="data.record" :item="item" />
      </template>
        <a-form-item :label="show_tag.label" v-if="showType === 'single'">
          <div class="upload-wrap" @click="visibleUpload = true">
            <img v-if="imageUrl" :src="imageUrl" alt="avatar" class="preview-img" />
            <div v-else class="upload-box">
              <svgIcon name="upload" />
              <div>单图</div>
            </div>
          </div>
        </a-form-item>
        <a-form-item :label="show_tag.label" v-else-if="showType === 'multiple'">
          <div class="upload-wrap" @click="visibleUpload = true">
            <img v-for="item in images" :key="item.key" :src="item" />
            <div class="upload-box">
              <svgIcon name="upload" />
              <div>多图</div>
            </div>
          </div>
        </a-form-item>
        <FormItem :data="data.record" :item="show_tag" v-else />
        <UploadDialog v-model:visible="visibleUpload" :type="showType" @file="getFile" />
    </a-form>
  </CustomDialog>
</template>

<script>
import { BASE_URL } from '../../../utils/config';
import { computed, getCurrentInstance, ref, provide, reactive, toRefs } from 'vue';
import CustomDialog from '../../../components/custom-dialog/index.vue';
import FormItem from '../../../components/form-item/index.vue';
import UploadDialog from '../../../components/upload/upload-dialog';
export default {
  name: 'ArticleDialog',
  components: {
    CustomDialog,
    FormItem,
    UploadDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  setup(props, { emit }) {
    let { ctx } = getCurrentInstance();

    let visibleDialog = computed({
      get: () => props.visible,
      set: (val) => {
        emit('update:visible', false);
      }
    });
    let form = [
      {
        label: '标签',
        key: 'block_tag',
        type: 1
      },
      {
        label: '类型',
        key: 'block_type',
        type: 1
      },
      {
        label: '备注',
        key: 'mark',
        type: 5
      }
    ];

    let category = ref([]);
    async function getCategory() {
      let res = await ctx.$fetch.post('/content.block/category');
      category.value = res.data;
    }
    getCategory();



    let visibleUpload = ref(false);

    function getFile(file) {
      console.log(file);
      if(tag.showType === 'single')
      {
        props.data.record.content = file.file_id;
        imageUrl.value = file.file_path;
      }else if(tag.showType === 'multiple')
      {
        let imgs = '';
        props.data.record.content = 1;
        file.forEach((f) => {
          imgs += `<img src="${f.file_path}"/>`;
        });
        // props.data.record.content = props.data.record.content + imgs;
      }
    }



    let tag = reactive({
        showType: 'single',
        show_tag: {
        label: '单图',
        key: 'content',
        type:1
      }
    })
    let images = ref([]);
    let fileList = ref([]);
    let imageUrl = ref('');

    if (!props.data.isAdd)
    {
      if(props.data.record.block_type === 10)
      {
        tag.showType = 'single';
        imageUrl = props.data.record.image.file_path;
      }
      else if(props.data.record.block_type === 20)
      {
        tag.showType = 'multiple';
        imageUrl = props.data.record.image.file_path;
      }else if(props.data.record.block_type === 30)
      {
        tag.showType = '';
        tag.show_tag =  {
            label: '文本',
            key: 'content',
            type:1
        }
      }else
      {
        tag.showType = '';
        tag.show_tag =  {
            label: '富文本',
            key: 'content',
            type:7
        }
      }

    }

    function handleChange(value) {
      console.log('value',value)
      switch (value) {
        case 10:
            tag.showType = 'single';
             tag.show_tag =  {
              label: '图片',
              key: 'content',
              type:1
            }
          break;
        case 20:
            console.log(1111)
            tag.showType = 'multiple';
            tag.show_tag =  {
              label: '图集',
              key: 'content',
              type:1
            }
            console.log( tag.show_tag);
          break;
        case 30:
            tag.showType = '';
            tag.show_tag =  {
              label: '文本',
              key: 'content',
              type:1
            }
            console.log( tag.show_tag);
          break;
        default:
          tag.showType = '';
          tag.show_tag =  {
              label: '富文本',
              key: 'content',
              type:7
            }
            console.log( tag.show_tag);
          break;
      }
    }
    // function handleChange(info) {
    //   if (info.file.status === 'done') {
    //     let response = fileList.value[0].response;
    //     if (response && response.code === 1) {
    //       imageUrl.value = response.data.file_path;
    //       props.data.record.image_id = response.data.file_id;
    //     } else {
    //       ctx.$message.error(response.msg);
    //     }
    //   }
    // }

    async function handleOk() {
      let res = null;
      if (props.data.isAdd) {
        res = await ctx.$fetch.post('/content.block/add', props.data.record);
      } else {
        res = await ctx.$fetch.post('/content.block/edit', props.data.record);
      }
      ctx.$message.success(res.msg);
      emit('refresh');
      emit('update:visible', false);
    }

    function handleUploadOk(file) {
      if(tag.showType !== '')
      {
        let imgs = '';
        file.forEach((f) => {
          imgs += `<img src="${f.file_path}"/>`;
        });
        props.data.record.article_content = props.data.record.article_content + imgs;
      }
    }

    provide('uploadOk', handleUploadOk);

    return {
      visibleDialog,
      form,
      handleOk,
      fileList,
      BASE_URL,
      handleChange,
      imageUrl,
      category,
      visibleUpload,
      ...toRefs(tag),
      getFile,
      images,
      handleUploadOk
    };
  }
};
</script>

<style lang="scss" scoped>
.preview-img {
  width: 102px;
  height: 102px;
}
</style>
